<template>
  <div class="wode">
    <div class="bgimg">
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="" />
    </div>
    <div class="user">
      <div class="avatar">
        <img src="" alt="" />
      </div>
      <div class="username">
        <p>{{nickname}}</p>
      </div>
      <div class="login">
        <van-button type="primary" to="/login" v-if="status==200">退出</van-button>
        <van-button type="primary" to="/login" v-else>去登录</van-button>
      </div>
    </div>
    <div class="nav">
      <van-grid :column-num="3">
        <van-grid-item icon="star-o" text="我的收藏" to="/collect"/>
        <van-grid-item icon="wap-home-o" text="我的出租" />
        <van-grid-item icon="clock-o" text="看房记录" />
        <van-grid-item icon="debit-pay" text="成为房主" />
        <van-grid-item icon="contact" text="个人资料" />
        <van-grid-item icon="service-o" text="联系我们" />
      </van-grid>
    </div>
    <div class="guanggao">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="" />
    </div>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
export default {
  data () {
    return {
      status: '',
      avatar: '',
      nickname: ''
    }
  },
  async created () {
    const { data } = await getUserInfo()
    console.log(data.body)
    this.status = data.status
    this.avatar = data.body.avatar
    this.nickname = data.body.nickname
  }
}
</script>

<style lang="less" scope>
.wode {
  // display: flex;
  .bgimg {
    position: fixed;
    top: 0;
    z-index: -1;
    img {
      width: 100%;
    }
  }
  .user {
    position: relative;
    display: flex;
    width: 320px;
    height: 160px;
    background-color: #fff;
    margin: 120px auto;
    box-shadow: 0 0 10px 3px #ddd;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    .avatar {
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translate(-50%);
      // align-items: center;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #fff;
      border: 1px solid #666;
      img {
        width: 100%;
      }
    }
    .username {
      width: 100px;
      height: 40px;
    }
    .login {
      width: 100px;
      height: 40px;
    }
  }
  .nav {
    margin-top: -100px;
  }
  .guanggao {
    width: 340px;
    height: 200px;
    margin: auto;
    img{
      width: 100%;
    }
  }
}
</style>
